<template>
  <div id="app">
    <header>
       <div class="ximaTop">
         <el-row>
         <el-col :span="12">
            <div id="ximaName">
              <img src="./assets/logo.png" alt="">
              <a href="http://www.chimabj.com.cn/">
                北京西马远东医疗投资管理有限公司(2005-2020)
              </a>
            </div>
         </el-col>
         <el-col :span="12">
           <div id="importantPage">
            <router-link to="/">首页</router-link>
           </div>
         </el-col>
        </el-row>  
      </div>
    </header>
     <div class="lunbo">
        <el-row>
           <el-col :span="24">
            <div class="lunbotu">
             <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="(img,index) in lunboList" :key="index">
                  <img :src="img.url" alt="">
                </el-carousel-item>
             </el-carousel>
            </div>
          </el-col>
        </el-row>
     </div>
    <el-row>
    <el-col :span="24">
     <div class="navBox">
       <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu index="1">
          <template  slot="title"><router-link to="/">关于我们</router-link></template>
          <el-menu-item index="2-1"><router-link to="/" style="color:#fff !important; text-decoration: none;">西马简介</router-link></el-menu-item>
            <el-divider></el-divider>
          <el-menu-item index="2-2"><router-link to="/culture" style="color:#fff !important; text-decoration: none;">我们的企业文化</router-link></el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template  slot="title"><router-link to="/outcoor">合作</router-link></template>
          <el-menu-item index="2-1"><router-link to="/outcoor" style="color:#fff !important; text-decoration: none;">德国合作</router-link></el-menu-item>
          <el-divider></el-divider>
          <el-menu-item index="2-2"><router-link to="/incoor" style="color:#fff !important; text-decoration: none;">国内合作</router-link></el-menu-item>
          <el-divider></el-divider>
          <el-menu-item index="2-3"><router-link to="/wincoor" style="color:#fff !important; text-decoration: none;">合作伙伴</router-link></el-menu-item>
          <el-divider></el-divider>
           <el-menu-item index="2-3"><router-link to="/commcoor" style="color:#fff !important; text-decoration: none;">调研交流</router-link></el-menu-item>
        </el-submenu>
         <el-submenu  index="3">
          <template  slot="title"><router-link to="/drgs">关于DRGss</router-link></template>
          <el-menu-item index="3-1"><router-link to="/drgs" style="color:#fff !important; text-decoration: none;">DRGs简介</router-link></el-menu-item>
          <el-divider></el-divider>
          <el-menu-item index="3-2"><router-link to="/drgsInt" style="color:#fff !important; text-decoration: none;">DRGs指标</router-link></el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template  slot="title"><router-link to="/solo">DRGs案例</router-link></template>
          <el-menu-item index="4-1"><router-link to="/solo" style="color:#fff !important; text-decoration: none;">单个编码查询</router-link></el-menu-item>
          <el-divider></el-divider>
          <el-menu-item index="4-2"><router-link to="/lots" style="color:#fff !important; text-decoration: none;">批量编码查询</router-link></el-menu-item>
          <el-divider></el-divider>
          <el-menu-item index="4-3"><router-link to="/groupSolo" style="color:#fff !important; text-decoration: none;">病案分组管理</router-link></el-menu-item>
          <el-divider></el-divider>
          <el-menu-item index="4-4"><router-link to="/groupLots" style="color:#fff !important; text-decoration: none;">批量分组管理</router-link></el-menu-item>
        </el-submenu>
       </el-menu>
     </div>
     <router-view />
    </el-col>
   </el-row>
     <footer>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <h1><router-link to="/">关于我们</router-link></h1>
          <p><router-link to="/">西马简介</router-link></p>
          <p><router-link to="/culture">我们的企业文化</router-link></p>
        </div>
      </el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <h1><router-link to="/outcoor">合作</router-link></h1>
          <p><router-link to="/outcoor">德国合作</router-link></p>
          <p><router-link to="/incoor">国内合作</router-link></p>
          <p><router-link to="/wincoor">合作伙伴</router-link></p>
          <p><router-link to="/commcoor">调研交流</router-link></p>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <h1><router-link to="/drgs">关于DRGss</router-link></h1>
          <p><router-link to="/drgs">DRGs简介</router-link></p>
          <p><router-link to="/drgsInt">DRGs指标</router-link></p>
        </div>
      </el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <h1><router-link to="/solo">DRGs案例</router-link></h1>
          <p><router-link to="/solo">单个编码查询</router-link></p>
          <p><router-link to="/lots">批量编码查询</router-link></p>
          <p><router-link to="/groupSolo">病案分组管理</router-link></p>
          <p><router-link to="/groupLots">批量分组管理</router-link></p>
        </div>
      </el-col>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      lunboList:[
          {url:require("./assets/lb3.jpg")},
          {url:require("./assets/lb2.jpg")},
          {url:require("./assets/lb1.jpeg")},
          {url:require("./assets/lb4.jpg")},
      ],
      
    }
  }
}
</script>

<style lang="less">
#app {
  // font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  font-family: '微软雅黑', "Helvetica Neue", Helvetica, sans-serif;
header{
  width:100%;
  background-color:#0a77a0;
  .ximaTop{
    width:100%;
    height:3.125rem /* 50/16 */;
    .el-row{
      .el-col{
        #ximaName{
          text-align: center;
          line-height:3.125rem /* 50/16 */;
          img{
            float:left;
            margin:auto;
            margin-left:3.125rem /* 50/16 */;
          }
          a{
            float:left;
            margin-left:.625rem /* 10/16 */;
            color:#fff;
            text-decoration: none;
          }
        }
        #importantPage{
           text-align: center;
          line-height:3.125rem /* 50/16 */;
          a{
            float:right;
            margin-right:1.25rem /* 20/16 */;
            color:#fff;
            text-decoration: none;
          }
        }
      }
    }
  }
}
  .lunbo{
    .el-row{
      .el-col{
        .lunbotu{
          .el-carousel{
            .el-carousel-item{
              img{
                width:100%;
                height:100%;
              }
            }
          }

        }
      }
    }
  }
  .navBox{
    background-color:#0a77a0 ;
    .el-menu{
      background-color:#0a77a0 !important;
      .el-submenu{
         background-color:#0a77a0 !important;
        .el-submenu__title{
          background-color:#0a77a0 !important;
          a{
            text-decoration: none;
            color:#fff !important;
          }
           a:hover,a.router-link-exact-active {
             color:#fc0;
         }
        }
      }
    }
      /* 水平菜单子菜单中的所有菜单项 */
    .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
      color: white;
    }
  .el-menu--horizontal .el-menu .el-menu-item {
    float: none;
    height: 23px;
    line-height: 23px;
    width: auto;
    background-color:#fff !important;
   } 
  }
  footer{
    width:100%;
    background-color:#0a77a0 !important;
    height:20.625rem /* 330/16 */;
    text-align:center;
      .el-col{
        background-color:#0a77a0;
          div{
            background-color:#0a77a0;
             margin-top:3.125rem /* 50/16 */;
            h1{
              font-size:20px;
              line-height:3.125rem /* 50/16 */;
              a{
                color:#fff;
                text-decoration: none;
              }
            }
            p{ 
              line-height:3.125rem /* 50/16 */;
              a{
                color:#fff;
                text-decoration: none;
              }
            }
          }
      }
    }
  }
</style>
